<template>
  <div class="home">
    <!-- <video id="video" autoplay width="600" height="400"></video> -->
<!--    <div class="nav">-->
<!--      <div class="gradient-text-one">元宝山露天煤矿连续工艺集控平台</div>-->
<!--      <div class="title">实时监控</div>-->
<!--      <div></div>-->
<!--    </div>-->
    <div class="wrapper">
      <div class="left">
        <div class="title">实时监控</div>
        <div class="tree">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true">
            <template class="custom-tree-node" slot-scope="{ node, data }">
              <span style="display: flex; align-items: center; height: 40px">
                <span>
                  <!-- <img v-if="!data.children && node.level !== 1" src="" alt="" /> //没有子级的图标，我这里没有子级不设置图标 -->
                  <img v-if="node.level != 1" src="../../assets/jiankong.png" alt="" />
                </span>
                <span class="label" style="margin-left: 5px">{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="right">
        <div class="video">
          <div class="video-box">
            <div
              class="box-item"
              :style="{
                width: videoList.length == 1 ? '100%' : videoList.length == 4 ? '49.9%' : '33.3%',
                height: videoList.length == 1 ? '100%' : videoList.length == 4 ? '49.9%' : '33.3%',
              }"
              v-for="(item, index) in videoList"
              :key="index"
            >
              <iframe style="height: 100%; width: 100%" id="iframeVideo" :src="item.url" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
        <div class="video-bottom">
          <img src="../../assets/View1.png" @click="videoClick(1)" alt="" />
          <img src="../../assets/View4.png" @click="videoClick(4)" alt="" />
          <img src="../../assets/View9.png" @click="videoClick(9)" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios';

  export default {
    name: 'HomeView',
    data() {
      return {
        show: true,
        currentIndex: -1,
        videoList: [
          { index: 0, url: '' },
          { index: 1, url: '' },
          { index: 2, url: '' },
          { index: 3, url: '' },
        ],
        // webRtcServer: null,
        // webRtcServer1: null,
        options: [
          {
            value: '选项1',
            label: '全部录像类型',
          },
        ],
        value: '',
        options1: [
          {
            value: '选项1',
            label: '中心存储',
          },
        ],
        value1: '',
        value2: '',
        value3: '',
        url: '',
        width: '100%',
        height: '1000px',
        data: [
          {
            label: '3号破碎站',
            isChildren: false,
            children: [
              {
                label: '3-1',
                isChildren: true,
                url: '10.13.154.80',
              },
              {
                label: '3-2',
                isChildren: true,
                url: '10.13.154.81',
              },
              {
                label: '3-3',
                isChildren: true,
                url: '10.13.154.82',
              },
              {
                label: '3-4',
                isChildren: true,
                url: '10.13.154.83',
              },
              {
                label: '3-5',
                isChildren: true,
                url: '10.13.154.84',
              },
              {
                label: '3-6',
                isChildren: true,
                url: '10.13.154.85',
              },
              {
                label: '3-7',
                isChildren: true,
                url: '10.13.154.86',
              },
              {
                label: '3-8',
                isChildren: true,
                url: '10.13.154.87',
              },
              {
                label: '3-9',
                isChildren: true,
                url: '10.13.154.88',
              },
              {
                label: '3-10',
                isChildren: true,
                url: '10.13.154.89',
              },
              {
                label: '3-11',
                isChildren: true,
                url: '10.13.154.90',
              },
              {
                label: '3-12',
                isChildren: true,
                url: '10.13.154.91',
              },
              {
                label: '3-13',
                isChildren: true,
                url: '10.13.154.92',
              },
            ],
          },
          {
            label: '5号破碎站',
            isChildren: false,
            children: [
              {
                label: '3-1',
                isChildren: true,
                url: '10.13.154.94',
              },
              {
                label: '3-2',
                isChildren: true,
                url: '10.13.154.95',
              },
              {
                label: '3-3',
                isChildren: true,
                url: '10.13.154.96',
              },
              {
                label: '3-4',
                isChildren: true,
                url: '10.13.154.97',
              },
              {
                label: '3-5',
                isChildren: true,
                url: '10.13.154.98',
              },
              {
                label: '3-6',
                isChildren: true,
                url: '10.13.154.99',
              },
              {
                label: '3-7',
                isChildren: true,
                url: '10.13.154.100',
              },
              {
                label: '3-8',
                isChildren: true,
                url: '10.13.154.101',
              },
              {
                label: '3-9',
                isChildren: true,
                url: '10.13.154.102',
              },
              {
                label: '3-10',
                isChildren: true,
                url: '10.13.154.103',
              },
              {
                label: '3-11',
                isChildren: true,
                url: '10.13.154.104',
              },
              {
                label: '3-12',
                isChildren: true,
                url: '10.13.154.105',
              },
              {
                label: '3-13',
                isChildren: true,
                url: '10.13.154.106',
              },
              {
                label: '3-14',
                isChildren: true,
                url: '10.13.154.107',
              },
            ],
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
      };
    },
    mounted() {
      // this.webRtcServer = new WebRtcStreamer(
      //   'video',
      //   'http://10.13.154.17:8000', //本机ip+端口8000
      // )
      // this.webRtcServer.connect(
      //   'rtsp://10.13.155.11:554/openUrl/MMeqLzW', //这是填自己的rtsp流
      // )
    },
    methods: {
      videoClick(length) {
        if (length > this.videoList.length) {
          let sum = length - this.videoList.length;
          for (let i = 0; i < sum; i++) {
            this.videoList.push({ index: i + this.videoList.length, url: '' });
          }
        }
        if (length < this.videoList.length) {
          let sum = this.videoList.length - length;
          this.videoList.splice(length - 1, sum);

          // for (let i = 0; i <= sum; i++) {
          //   //   this.videoList.push({ index: i + this.videoList.length, url: '' })
          //   console.log(i)
          //   console.log(this.videoList);
          // }
        }
      },
      handleNodeClick(data) {
        // console.log(data);
        // document.getElementById('myIframe1').src = "http://localhost:10087/vlc.html?mrl=rtsp://10.13.155.11:554/openUrl/rHEstFu";
        if (data.isChildren) {
          axios.get('http://localhost:8888/api/v1/candidates/' + data.url).then((data) => {
            // alert(data.data);
            // console.log(data.data);
            // document.getElementById('myIframe1').src = "http://localhost:10087/vlc.html?mrl=" + data.data;
            if (this.currentIndex <= this.videoList.length - 1) {
              this.show = false;
              this.$nextTick(() => {
                this.videoList[this.currentIndex].url = 'http://localhost:10087/vlc.html?mrl=' + data.data;
                this.show = true;
              });

              // document.getElementById('iframeVideo')[this.currentIndex].src = "http://localhost:10087/vlc.html?mrl=" + data.data.url;
              this.currentIndex++;
            } else {
              this.show = false;
              this.currentIndex = 0;
              this.$nextTick(() => {
                this.videoList[this.currentIndex].url = 'http://localhost:10087/vlc.html?mrl=' + data.data;
                this.show = true;
                this.currentIndex++;
              });
              // document.getElementById('iframeVideo')[this.currentIndex].src = "http://localhost:10087/vlc.html?mrl=" + data.data.url;
            }
          });
          // .then(data => (this.postId = data.id));
          // .then(response => console.log(response.json()))
          // request({
          //     url: 'http://127.0.0.1:8082/wx/user/getRtsp',
          //     method: 'post',
          //     params
          // }).then(response => {
          //     console.log(response.data)
          // })
          // var rtspUrl = "rtsp://10.13.155.11:554/openUrl/WuIIRiM";
          // var videoUrl = "http://localhost:10087/vlc.html?mrl=" + rtspUrl;
          // if (this.currentIndex <= this.videoList.length - 1) {
          //     this.videoList[this.currentIndex].url = videoUrl
          //     this.currentIndex++
          // } else {
          //     this.currentIndex = 0
          //     this.videoList[this.currentIndex].url = videoUrl
          //     this.currentIndex++
          // }
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .nav {
    div {
      flex: 1;
    }

    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #02041b;

    .title {
      width: 400px;
      height: 50px;
      color: #46a6f8;
      background-image: url('../../assets/bt_2.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
    }

    .gradient-text-one {
      display: flex;
      align-items: center;
      height: 50px;
      font-size: 25px;
      font-weight: bold;
      padding: 30px;
      background-image: -webkit-linear-gradient(bottom, #76b3ff, #76b3ff, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .wrapper {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    background-color: #050a32;

    .left {
      width: 20%;
      height: 100%;
      padding: 20px;

      .from {
        height: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      }

      .tree {
        width: 100%;
        height: calc(100% - 140px);
        overflow: auto;
      }

      .title {
        color: #fff;
        height: 70px;
        display: flex;
        align-items: center;
        font-size: 18px;
        margin-top: 10px;
      }

      a {
        text-decoration: none;
      }

      .nav-item {
        height: 60px;
        display: flex;
        align-items: center;
        padding-left: 20%;
        color: #fff;
        background-color: #051751;
        margin-top: 2px;
      }
    }
  }

  .right {
    width: 80%;
    height: 100%;
    background-color: #050a32;

    .video-bottom {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }

    .video {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;

      .video-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .box-item {
          width: 49.9%;
          height: 50%;
          background-color: #262626;
          border: 1px solid #02041b;
        }
      }
    }
  }

  ::v-deep .el-tree {
    color: #fff;
    background-color: transparent;
  }

  ::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #183056;
  }

  ::v-deep .el-tree-node__content:hover {
    background-color: #050a32;
  }

  ::v-deep .is-focusable:focus {
    background-color: #183056;
  }

  ::v-deep .el-input__inner {
    background-color: #000;
    color: #fff;
    border: 1px solid #3c62c0;
  }

  ::-webkit-scrollbar-track-piece {
    background: transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: #4e4e4e;
    border-radius: 20px;
  }
</style>
